<script setup>
import { ref, watch } from 'vue';


// 监听单个数据
const count = ref(10)
const cut = () => count.value--
const add = () => count.value++
watch(count, (newValue, oldValue) => {
  console.log(`新值：${newValue},旧值：${oldValue}`);
})

// 监听多个数据
const money = ref(100)
const changeManey = () => money.value += 10000
watch([count, money], (newValue, oldValue) => {
  console.log(`新值：${newValue},旧值：${oldValue}`);
})
// watch监听复杂数据类型
const person = ref({
  name: '张三',
  age: 18
})
// 第一种写法
// watch(person, (newValue) => {
//   // 新数据会覆盖旧数据
//   console.log(`新值：${newValue.age}`);
// }, {
//   deep: true
// })
// 第二种写法
watch(() => person.value.age, (newValue) => {
  console.log(`新值：${newValue}`);
}, {
  immediate: true
})
</script>

<template>
  <button @click="cut">-</button>
  <span>{{ count }}</span>
  <button @click="add">+</button>
  <hr>
  <div>钱{{ money }}</div>
  <button @click="changeManey">工资</button>
  <div>人：{{ person }}</div>
  <button @click="person.age++">增加年龄</button>
</template>

<style scoped></style>